<template>
	<view class="wrap">
		<view :class="{'right': index>30 } " hover-stay-time="200" v-for="(item,index) in number" :key="index" @tap="click(item)"
		 hover-class="hover">{{item}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', 'A', 'S', 'D',
					'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '挂', '学', '返回', '删除'
				]
			};
		},

		methods: {
			click(item) {
				console.log(item)
				this.$emit('click', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx 10rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #fff;

		&>view {
			height: 80rpx;
			width: 60rpx;
			margin: 10rpx 7rpx;
			background-color: #f1f1f1;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 4rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}

		.hover {
			background-color: #C0C0C0;
		}

		.right {
			margin-right: 10rpx;
		}

	}

	.wrap:after {
		content: "";
		flex: auto;
	}
</style>
